<template>
  <el-container>
  <top />
  <el-main style="width:1250px; margin:0px auto">
    <el-tabs v-model="activeName">
        <el-tab-pane v-for="t in thingtype2"  v-bind:key="t.id" :label="t.type" :name="'index'+t.id">
            <el-row :gutter="20">
                <el-col :span="4" v-for="list in thinglist['tt2'+t.id]"  v-bind:key="'list'+list.id">
                    <div style="border:solid 1px #DCDCDC; padding:5px">
                    <router-link :to="{name:'thingshow',params:{id:list.id}}">
                            <el-image  :src="url+list.img" fit="cover" style="height:130px; width:100%;" ></el-image>
                        </router-link>
                    </div>
                    <p style="display:block; text-align:center">{{list.name}}</p>
                    
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>

<el-divider></el-divider>

     <div v-for="t in thingtype"  v-bind:key="t.id">
    <div slot="title">
      <h2>{{t.type}}</h2>
    </div>
     <el-row :gutter="20">
                <el-col :span="4" v-for="list in thinglist['tt1'+t.id]"  v-bind:key="'list'+list.id">
                    <div style="border:solid 1px #DCDCDC; padding:5px">
                    <router-link :to="{name:'thingshow',params:{id:list.id}}">
                            <el-image  :src="url+list.img" fit="cover" style="height:130px; width:100%;" ></el-image>
                        </router-link>
                    </div>
                    <p style="display:block; text-align:center">{{list.name}}</p>
                    
                </el-col>
            </el-row>
            <el-divider></el-divider>
     </div>

    
  </el-main>
  <el-footer><foot /></el-footer>
</el-container>
</template>

<script>
    import top from "./components/top.vue"
    import foot from "./components/foot.vue"
    import {index} from "@/api/index";
    export default{
        components: {
            top,foot
        },
        data(){
            return{
                url:process.env.VUE_APP_BASE_API,
                activeName:'',
                thingtype:[],
                thingtype2:[],
                thinglist:[]
            }
        },
        created(){
            this.Bind()
        },
        methods:{
            async Bind(){
                await index().then(res=>{
                    this.thingtype=res.data.thingtype;
                    this.thingtype2=res.data.thingtype2;
                    this.activeName="index"+res.data.thingtype[0].id
                    this.thinglist=res.data;
                })
            }
        }
    }
</script>
